<template>
  <!-- 合同备案总数 -->
  <base-paenl class="grid-information-dialog" id="tenancyContractDialog">
    <div
      slot="header"
      class="header-title"
      @mousedown="mouseDownLeft($event, 'tenancyContractDialog', 100, 600)"
    >
      合同备案总数
    </div>
    <div slot="main" class="slot-main">
      <div
        v-for="(item, index) of tenancyContractData"
        :key="index"
        class="panel-item"
      >
        <div class="panel-row">
          <div class="panel-row-bg"></div>
          <div class="panel-row-content">
            <div
              class="panel-row-content-name panel-row-content-name1"
              :title="item.name"
            >
              {{ item.name }}
            </div>
            <div
              v-if="!item.children"
              class="panel-row-content-value panel-row-content-value1"
              :title="item.value"
            >
              {{ item.value }}
            </div>
          </div>
        </div>
        <div v-if="item.children" class="panel-second-row2">
          <div
            v-for="(subItem, subIndex) of item.children"
            :key="subIndex"
            class="panel-second-content"
          >
            <div class="panel-second-content-name">{{ subItem.name }}</div>
            <div class="panel-second-content-value">{{ subItem.value }}</div>
          </div>
        </div>
      </div>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import { mouseDownLeft } from "@/assets/modules/utils";
import BasePaenl from "./CBase.vue";

@Component({
  name: "TenancyContract",
  components: { BasePaenl }
})
export default class extends Vue {
  get tenancyContractData() {
    return this.$store.getters["panelData/tenancyContractData"];
  }
  mounted() {}
  mouseDownLeft(event: any, id: string, sTop: number, sRight: number) {
    mouseDownLeft(event, id, sTop, sRight);
  }
}
</script>

<style lang="scss" scoped>
.grid-information-dialog {
  width: 505px;
  height: 285px;
  background-image: url(../../assets/images/dialogs/tanchuangbeijingkuang-4.png);
  background-size: 100% 100%;
}
.slot-main {
  width: 470px;
  height: 212px;
  background-color: rgba(0, 14, 29, 0.25);
  padding: 20px;
}
.panel-row {
  width: 438px;
  .panel-row-bg {
    width: 438px;
    background-image: url(../../assets/images/dialogs/tanchuangliebiaoshuangtiaokuang.png);
    background-size: 100% 100%;
  }
  .panel-row-content {
    width: 418px;
    .panel-row-content-value {
      width: 250px;
    }
  }
}
.panel-second-row2 {
  width: 418px;
  .panel-second-content {
    width: 140px;
  }
}
</style>
<style lang="scss"></style>
